<template>
	<view>
		<view class="box1">
			<view>业务类型</view>
			<view class="box1_r">{{dat_arr.query01}}</view>
		</view>
		<view class="line"></view>
		<view class="box2">
			<view class="fot1">承租人信息</view>
			<view class="box2_1">
				<view class="box2_head">身份证号</view>
				<view class="box2_2">{{dat_arr.query02}}</view>
			</view>
			<view class="box2_1">
				<view class="box2_head">姓名</view>
				<view class="box2_2">{{dat_arr.query03}}</view>
			</view>
			<view class="box2_1">
				<view class="box2_head">手机号码</view>
				<view class="box2_2">{{dat_arr.query04}}</view>
			</view>
			<!-- <view class="box2_1">
				<view class="box2_head">婚姻状况</view>
				<view class="box2_2">{{dat_arr.query05}}</view>
			</view>
			<view class="box2_1">
				<view class="box2_head">是否有担保人</view>
				<view class="box2_2">{{dat_arr.query06}}</view>
			</view>
			<view class="box2_1">
				<view class="box2_head">备注</view>
				<view class="box2_2">{{dat_arr.query07}}</view>
			</view> -->
		</view>
		<view class="line"></view>
		<!-- <view class="box2">
			<view class="fot1">配偶信息</view>
			<view class="box2_1">
				<view class="box2_head">身份证号</view>
				<view class="box2_2">{{dat_arr.query07}}</view>
			</view>
			<view class="box2_1">
				<view class="box2_head">姓名</view>
				<view class="box2_2">{{dat_arr.query08}}</view>
			</view>
			<view class="box2_1">
				<view class="box2_head">手机号码</view>
				<view class="box2_2">{{dat_arr.query09}}</view>
			</view>
		</view> -->
		<view class="box2">
			<view class="fot1" style="margin-bottom: 30rpx;">征信授权查询</view>
			<view class="box4">
				<view @click="img_b(a11)">
					<image :src="a11" mode=""></image>
					<!-- <view>身份证正面</view> -->
				</view>
				<view @click="img_b(a12)">
					<image :src="a12" mode=""></image>
					<!-- <view>身份证反面</view> -->
				</view>
				<view @click="img_b(a13)">
					<image :src="a13" mode=""></image>
					<!-- <view>征信面签照</view> -->
				</view>
				<view @click="img_b(a14)">
					<image :src="a14" mode=""></image>
					<!-- <view>征信授权书</view> -->
				</view>
			</view>
			<view class="box3" v-if="false"><image class="xing" src="../../static/59.png" mode=""></image>请上传车辆资料</view>
			<view class="box4" v-if="false">
				<view @click="uploading(21)">
					<image :src="a21" mode=""></image>
					<view>登记证1和2页</view>
				</view>
				<view @click="uploading(22)">
					<image :src="a22" mode=""></image>
					<view>登记证3和4页</view>
				</view>
				<view @click="uploading(23)">
					<image :src="a23" mode=""></image>
					<view>左前45度</view>
				</view>
				<view @click="uploading(24)">
					<image :src="a24" mode=""></image>
					<view>右前门和AB柱</view>
				</view>
				<view @click="uploading(25)">
					<image :src="a25" mode=""></image>
					<view>仪表盘</view>
				</view>
				<view @click="uploading(26)">
					<image :src="a26" mode=""></image>
					<view>左后门含BC柱</view>
				</view>
				<view @click="uploading(27)">
					<image :src="a27" mode=""></image>
					<view>中控操作台</view>
				</view>
				<view @click="uploading(28)">
					<image :src="a28" mode=""></image>
					<view>车顶蓬含天窗</view>
				</view>
				<view @click="uploading(29)">
					<image :src="a29" mode=""></image>
					<view>右后45度</view>
				</view>
				<view @click="uploading(30)">
					<image :src="a30" mode=""></image>
					<view>车身铭牌</view>
				</view>
				<view @click="uploading(31)">
					<image :src="a31" mode=""></image>
					<view>发送机舱</view>
				</view>
				<view @click="uploading(32)">
					<image :src="a32" mode=""></image>
					<view>车辆评估报告</view>
				</view>
			</view>
			<view class="all_btn" @click="sp()">去审批</view>
			<!-- 图片放大 -->
			<bigimg :imgsrc="imgsrc" :imgArr="imgArr" v-if="show" @b_show="b_show"></bigimg>
		</view>
	</view>
</template>

<script>
	import bigimg from '../../component/big_img.vue'
	export default {
		data() {
			return {
				imgsrc:'',
				imgArr:[],
				show:false,
				ind:0,
				ind1:0,
				ind2:0,
				sta:'',
				type:'',
				hunyin:[],
				yewu:[],
				shifou:[],
				a1:'',
				a2:'',
				a3:'',
				a4:'',
				a5:'',
				a6:'',
				a7:'',
				a8:'',
				a9:'',
				a10:'',
				a11:'../../static/55.png',
				a12:'../../static/56.png',
				a13:'../../static/57.png',
				a14:'../../static/58.png',
				a21:'../../static/65.png',
				a22:'../../static/66.png',
				a23:'../../static/67.png',
				a24:'../../static/67.png',
				a25:'../../static/67.png',
				a26:'../../static/67.png',
				a27:'../../static/67.png',
				a28:'../../static/67.png',
				a29:'../../static/67.png',
				a30:'../../static/67.png',
				a31:'../../static/67.png',
				a32:'../../static/67.png',
				dat_arr:{}
			}
		},
		components:{bigimg},
		onLoad:function(option) {
			console.log(JSON.parse(option.item))
			this.dat_arr = JSON.parse(option.item)
			if(this.dat_arr.query11 != '' && this.dat_arr.query11 != null){
				this.a11 = this.dat_arr.query11
				this.imgArr.push(this.dat_arr.query11)
			}
			if(this.dat_arr.query12 != '' && this.dat_arr.query12 != null){
				this.a12 = this.dat_arr.query12
				this.imgArr.push(this.dat_arr.query12)
			}
			if(this.dat_arr.query13 != '' && this.dat_arr.query13 != null){
				console.log(this.dat_arr.query13,99999)
				this.a13 = this.dat_arr.query13
				this.imgArr.push(this.dat_arr.query13)
			}
			if(this.dat_arr.query14 != '' && this.dat_arr.query14 != null){
				this.a14 = this.dat_arr.query14
				this.imgArr.push(this.dat_arr.query14)
			}
			
			// if(this.dat_arr.query21 != '' && this.dat_arr.query21 != null){
			// 	this.a21 = this.dat_arr.query21
			// }
			// if(this.dat_arr.query22 != '' && this.dat_arr.query22 != null){
			// 	this.a22 = this.dat_arr.query22
			// }
			// if(this.dat_arr.query23 != '' && this.dat_arr.query23 != null){
			// 	this.a23 = this.dat_arr.query23
			// }
			// if(this.dat_arr.query24 != '' && this.dat_arr.query24 != null){
			// 	this.a24 = this.dat_arr.query24
			// }
			// if(this.dat_arr.query25 != '' && this.dat_arr.query25 != null){
			// 	this.a25 = this.dat_arr.query25
			// }
			// if(this.dat_arr.query26 != '' && this.dat_arr.query26 != null){
			// 	this.a26 = this.dat_arr.query26
			// }
			// if(this.dat_arr.query27 != '' && this.dat_arr.query27 != null){
			// 	this.a27 = this.dat_arr.query27
			// }
			// if(this.dat_arr.query28 != '' && this.dat_arr.query28 != null){
			// 	this.a28 = this.dat_arr.query28
			// }
			// if(this.dat_arr.query29 != '' && this.dat_arr.query29 != null){
			// 	this.a29 = this.dat_arr.query29
			// }
			// if(this.dat_arr.query30 != '' && this.dat_arr.query30 != null){
			// 	this.a30 = this.dat_arr.query30
			// }
			// if(this.dat_arr.query31 != '' && this.dat_arr.query31 != null){
			// 	this.a31 = this.dat_arr.query31
			// }
			// if(this.dat_arr.query32 != '' && this.dat_arr.query32 != null){
			// 	this.a32 = this.dat_arr.query32
			// }
			
		},
		methods: {
			b_show:function(e){
				this.show = e
			},
			img_b:function(e){
				// console.log(e)
				this.imgArr.forEach((item,index)=>{
					if(item == e){
						this.imgsrc = index
					}
				})
				if(this.imgArr != ''){this.show = true}
			},
			sp:function(){
				console.log(JSON.stringify(this.dat_arr))
				uni.navigateTo({
					url:'../ysp_order/ysp_order?item=' + JSON.stringify(this.dat_arr)
				})
			},
		}
	}
</script>

<style>
	.box4>view>image{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.box4>view{
		width: 316rpx;
		height: 211rpx;
		font-size:22rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:#666666;
		margin-bottom: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 10;
	}
	.box4{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.xing{
		width: 12rpx;
		height: 14rpx;
		margin-right: 15rpx;
	}
	.box3{
		font-size:22rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(102,102,102,1);
		margin: 30rpx 0 40rpx 0;
	}
	.box2_3{
		/* width:64rpx;
		height:54rpx; */
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		border:1px solid rgba(153,153,153,1);
		border-radius:10rpx;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 20rpx;
	}
	.box2_2>input{
		text-align: right;
	}
	.box2_2{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.zxj{
		width: 37rpx;
		height: 32rpx;
		margin-left: 20rpx;
	}
	.box2_head{
		white-space: nowrap;
	}
	.box2_1{
		height: 88rpx;
		border-bottom: 1px solid #EEEDF2;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.fot1{
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
	}
	.box2{
		padding: 30rpx;
		box-sizing: border-box;
	}
	.line{
		height:20rpx;
		background:rgba(238,237,242,1);
	}
	.active{
		background:rgba(58,98,255,0.1);
		border:1rpx solid #3A62FF !important;
		border-radius:10rpx;
		color: #3A62FF !important;
	}
	.box1_r>view{
		/* width:86rpx;
		height:44rpx; */
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		border:1rpx solid rgba(153,153,153,1);
		border-radius:10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10rpx;
		font-size:26rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
	}
	.box1_r{
		display: flex;
		justify-content:flex-start;
		align-items: center;
	}
	.box1{
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
</style>
